<template>
  <div class="p-10px">
    <CategorySelector :disabled="false" />
    <SpuList v-if="isShow === 1" @setIsShow="setIsShow" @setSpu="spu = $event" />
    <SaveOrUpdateSpu v-else-if="isShow === 2" @setIsShow="setIsShow" :currentSpu="spu" />
    <SaveSku v-else />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'Spu',
  });
</script>

<script lang="ts" setup>
  import { ref } from 'vue';
  import CategorySelector from '../category-selector/index.vue';
  import SpuList from './components/SpuList.vue';
  import SaveOrUpdateSpu from './components/SaveOrUpdateSpu.vue';
  import SaveSku from './components/SaveSku.vue';
  import type { SpuModel } from '/@/api/product/model/spuModel';
  import type { IsShowModel } from './types';

  /*
    定义一个标识 isShow
      1 SpuList
      2 SaveOrUpdateSpu
      3 SaveSku
  */
  // const isShow = ref<IsShowModel>(IsShowModel.SpuList);
  const isShow = ref<IsShowModel>(1);

  const spu = ref<SpuModel>({
    // id: undefined,
    // category3Id?: number;
    spuName: '',
    description: '',
    tmId: undefined,
    spuSaleAttrList: [],
    spuImageList: [],
  });

  const setIsShow = (current: IsShowModel) => {
    isShow.value = current;
  };
</script>
